<template>
  <view class="add-stoppage-log-container">
    <uni-section title="停工日志信息" type="line"></uni-section>

    <view class="form-container">
      <uni-forms ref="form" :model="formData" :rules="rules" label-width="200rpx">
        <!-- 选择项目（底部弹出选择） -->
        <uni-forms-item label="选择项目" name="projectId" required>
          <view class="input-with-icon" @click="showProjectPicker">
            <uni-icons type="folder" size="20" color="#999"></uni-icons>
            <view class="search-input inner" :class="{ placeholder: !displayProjectName }">
              {{ displayProjectName || '请选择项目' }}
            </view>
            <uni-icons v-if="formData.projectId" type="closeempty" size="18" color="#bbb"
              @click.stop="clearProject"></uni-icons>
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </uni-forms-item>

        <!-- 停工日期 -->
        <uni-forms-item label="停工日期" name="meetingDate" required>
          <uni-datetime-picker v-model="formData.meetingDate" type="date" placeholder="请选择停工日期" />
        </uni-forms-item>

        <!-- 天气 -->
        <uni-forms-item label="天气" name="weather" required>
          <uni-easyinput v-model="formData.weather" placeholder="请输入天气" :clearable="true" />
        </uni-forms-item>

        <!-- 管理人员数量 -->
        <uni-forms-item label="管理人员数量" name="managerCount" required>
          <uni-easyinput v-model="formData.managerCount" placeholder="请输入管理人员数量" type="number" :clearable="true" />
        </uni-forms-item>

        <!-- 班组成员数量 -->
        <uni-forms-item label="班组成员数量" name="teamMemberCount" required>
          <uni-easyinput v-model="formData.teamMemberCount" placeholder="请输入班组成员数量" type="number" :clearable="true" />
        </uni-forms-item>

        <!-- 桩基设备型号 -->
        <uni-forms-item label="桩基设备型号" name="baseDeviceModel" required>
          <uni-easyinput v-model="formData.baseDeviceModel" placeholder="请输入桩基设备型号" :clearable="true" />
        </uni-forms-item>

        <!-- 桩基设备数量 -->
        <uni-forms-item label="桩基设备数量" name="baseDeviceCount" required>
          <uni-easyinput v-model="formData.baseDeviceCount" placeholder="请输入桩基设备数量" type="number"
            :clearable="true" />
        </uni-forms-item>

        <!-- 当日巡查情况 -->
        <view class="section-divider">
          <text class="section-title">当日巡查情况</text>
        </view>

        <!-- 巡查频次 -->
        <uni-forms-item label="巡查频次" name="patrolFrequency" required>
          <uni-easyinput v-model="formData.patrolFrequency" placeholder="请输入巡查频次" :clearable="true" />
        </uni-forms-item>

        <!-- 巡查时段 -->
        <uni-forms-item label="巡查时段" name="patrolPeriod" required>
          <uni-easyinput v-model="formData.patrolPeriod" placeholder="请输入巡查时段" :clearable="true" />
        </uni-forms-item>

        <!-- 异常情况 -->
        <uni-forms-item label="异常情况" name="isAbnormal" required>
          <radio-group @change="handleAbnormalChange">
            <label class="radio-label">
              <radio value="1" :checked="formData.isAbnormal === 1" />
              <text>正常</text>
            </label>
            <label class="radio-label">
              <radio value="2" :checked="formData.isAbnormal === 2" />
              <text>异常</text>
            </label>
          </radio-group>
        </uni-forms-item>

        <!-- 异常情况说明 -->
        <uni-forms-item v-if="formData.isAbnormal !== 1" label="异常情况说明" name="abnormalDescription" required>
          <uni-easyinput v-model="formData.abnormalDescription" type="textarea" placeholder="请输入异常情况说明" :autoHeight="true"
            :maxlength="500" />
        </uni-forms-item>

        <!-- 监控设备状态 -->
        <uni-forms-item label="监控设备状态" name="monitorStatus" required>
          <radio-group @change="handleMonitorStatusChange">
            <label class="radio-label">
              <radio value="1" :checked="formData.monitorStatus === 1" />
              <text>正常</text>
            </label>
            <label class="radio-label">
              <radio value="2" :checked="formData.monitorStatus === 2" />
              <text>故障</text>
            </label>
          </radio-group>
        </uni-forms-item>

        <!-- 故障说明 -->
        <uni-forms-item v-if="formData.monitorStatus !== 1" label="故障说明" name="faultDescription" required>
          <uni-easyinput v-model="formData.faultDescription" type="textarea" placeholder="请输入故障说明" :autoHeight="true"
            :maxlength="500" />
        </uni-forms-item>

        <!-- 巡查照片 -->
        <uni-forms-item label="巡查照片" name="imageList">
          <view class="image-upload-section">
            <view class="image-grid">
              <view class="image-card" v-for="(image, index) in uploadedImages" :key="image.originalPath || index">
                <image class="image-thumb" mode="aspectFill" :src="image.url || image.previewUrl"
                  @click="previewUploadedImage(index)" />
                <view class="image-remove" @click="removeUploadedImage(index)">
                  <uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
                </view>
              </view>
              <view class="image-card image-add" v-if="canAddMoreImages" @click="handleSelectImages">
                <uni-icons type="plusempty" size="30" color="#999"></uni-icons>
                <text class="add-text">{{ imageUploadLoading ? '上传中...' : '上传照片' }}</text>
              </view>
            </view>
            <text class="upload-tip">最多可上传 {{ maxImageCount }} 张图片，支持相册或拍照</text>
          </view>
          <view class="other-attachment-list" v-if="otherAttachments.length">
            <view class="attachment-row" v-for="(file, index) in otherAttachments" :key="file.originalPath">
              <view class="attachment-info">
                <uni-icons type="paperclip" size="18" color="#007AFF"></uni-icons>
                <text class="attachment-name">{{ file.fileName }}</text>
              </view>
              <view class="attachment-actions">
                <text class="attachment-action" @click="previewAttachmentFile(file)">预览</text>
                <text class="attachment-action remove" @click="removeOtherAttachment(index)">移除</text>
              </view>
            </view>
          </view>
        </uni-forms-item>

        <!-- 其他补充说明 -->
        <uni-forms-item label="其他补充说明" name="remark">
          <uni-easyinput v-model="formData.remark" type="textarea" placeholder="请输入其他补充说明" :autoHeight="true"
            :maxlength="500" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn cancel" @click="handleCancel">取消</button>
      <button class="action-btn submit" @click="handleSubmit">提交</button>
    </view>

    <!-- 项目选择弹窗 -->
    <uni-popup ref="projectPopup" type="bottom" :safe-area="false">
      <view class="project-picker">
        <view class="picker-header">
          <text class="picker-title">选择项目</text>
          <uni-icons type="closeempty" size="20" color="#999" @click="closeProjectPicker"></uni-icons>
        </view>
        <view class="picker-content">
          <view class="project-list">
            <view class="project-item" v-for="project in projectList" :key="project.id" @click="selectProject(project)"
              :class="{ selected: String(formData.projectId) === String(project.id) }">
              <view class="project-info">
                <text class="project-name">{{ project.projectName }}</text>
              </view>
              <uni-icons v-if="String(formData.projectId) === String(project.id)" type="checkmarkempty" size="20"
                color="#007AFF"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { listAllProjectContractInfo, getBizStoppageLog, addBizStoppageLog, updateBizStoppageLog } from '@/api/production/index'
import { fileLinkTransfer } from '@/api/production/file'
import { uploadConstructionImage } from '@/api/common/image'

export default {
  data() {
    return {
      formData: {
        id: null,
        projectId: '',
        meetingDate: '',
        weather: '',
        managerCount: '',
        teamMemberCount: '',
        baseDeviceModel: '',
        baseDeviceCount: '',
        patrolFrequency: '',
        patrolPeriod: '',
        isAbnormal: 1,
        abnormalDescription: '',
        monitorStatus: 1,
        faultDescription: '',
        imageList: [],
        remark: ''
      },
      rules: {
        projectId: {
          rules: [
            { required: true, errorMessage: '请选择项目' }
          ]
        },
        meetingDate: {
          rules: [
            { required: true, errorMessage: '请选择停工日期' }
          ]
        },
        weather: {
          rules: [
            { required: true, errorMessage: '请输入天气' },
            { minLength: 1, maxLength: 20, errorMessage: '天气长度为1-20个字符' }
          ]
        },
        managerCount: {
          rules: [
            { required: true, errorMessage: '请输入管理人员数量' }
          ]
        },
        teamMemberCount: {
          rules: [
            { required: true, errorMessage: '请输入班组成员数量' }
          ]
        },
        baseDeviceModel: {
          rules: [
            { required: true, errorMessage: '请输入桩基设备型号' },
            { minLength: 1, maxLength: 50, errorMessage: '设备型号长度为1-50个字符' }
          ]
        },
        baseDeviceCount: {
          rules: [
            { required: true, errorMessage: '请输入桩基设备数量' }
          ]
        },
        patrolFrequency: {
          rules: [
            { required: true, errorMessage: '请输入巡查频次' }
          ]
        },
        patrolPeriod: {
          rules: [
            { required: true, errorMessage: '请输入巡查时段' }
          ]
        },
        isAbnormal: {
          rules: [
            { required: true, errorMessage: '请选择异常情况' }
          ]
        },
        abnormalDescription: {
          rules: [
            { required: true, errorMessage: '请输入异常情况说明' }
          ]
        },
        monitorStatus: {
          rules: [
            { required: true, errorMessage: '请选择监控设备状态' }
          ]
        },
        faultDescription: {
          rules: [
            { required: true, errorMessage: '请输入故障说明' }
          ]
        }
      },
      projectList: [],
      projectIdToName: {},
      uploadedImages: [],
      otherAttachments: [],
      imageUploadLoading: false,
      maxImageCount: 9
    }
  },
  computed: {
    displayProjectName() {
      const key = String(this.formData.projectId || '')
      return key ? (this.projectIdToName[key] || '') : ''
    },
    canAddMoreImages() {
      return this.uploadedImages.length < this.maxImageCount && !this.imageUploadLoading
    }
  },
  async onLoad(options) {
    // 获取传递的参数
    if (options.id) {
      this.formData.id = options.id
      await this.loadFormData()
    }

    await this.fetchProjectOptions()
  },
  methods: {
    // 获取项目选项
    async fetchProjectOptions() {
      try {
        const response = await listAllProjectContractInfo()
        const list = response.data || []
        const options = list.map(p => ({ id: p.id, projectName: p.projectName }))
        this.projectList = options
        const map = {}
        options.forEach(o => { map[String(o.id)] = o.projectName || '' })
        this.projectIdToName = map
      } catch (error) {
        console.error('获取项目列表失败:', error)
        uni.showToast({
          title: '获取项目列表失败',
          icon: 'none'
        })
      }
    },
    showProjectPicker() {
      this.$refs.projectPopup && this.$refs.projectPopup.open()
    },
    closeProjectPicker() {
      this.$refs.projectPopup && this.$refs.projectPopup.close()
    },
    selectProject(project) {
      this.formData.projectId = project.id
      this.closeProjectPicker()
    },
    clearProject() {
      this.formData.projectId = ''
    },

    // 加载表单数据（编辑时）
    async loadFormData() {
      try {
        const response = await getBizStoppageLog(this.formData.id)
        const data = response.data || response
        // 规范化状态字段
        this.formData = {
          ...data,
          isAbnormal: this.normalizeStatusValue(data.isAbnormal),
          monitorStatus: this.normalizeStatusValue(data.monitorStatus),
          imageList: this.normalizeImageListData(data.imageList)
        }
        await this.syncAttachmentDisplay()
      } catch (error) {
        console.error('获取表单数据失败:', error)
        uni.showToast({
          title: '获取表单数据失败',
          icon: 'none'
        })
      }
    },

    // 规范化状态值
    normalizeStatusValue(value) {
      if (value === undefined || value === null || value === '') {
        return 1
      }
      const parsed = Number(value)
      return Number.isNaN(parsed) ? 1 : parsed
    },

    // 异常情况改变
    handleAbnormalChange(e) {
      this.formData.isAbnormal = Number(e.detail.value)
      if (this.formData.isAbnormal === 1) {
        this.formData.abnormalDescription = ''
      }
    },

    // 监控设备状态改变
    handleMonitorStatusChange(e) {
      this.formData.monitorStatus = Number(e.detail.value)
      if (this.formData.monitorStatus === 1) {
        this.formData.faultDescription = ''
      }
    },

    // 取消操作
    handleCancel() {
      uni.showModal({
        title: '确认取消',
        content: '确定要取消操作吗？未保存的数据将丢失。',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },

    // 提交表单
    handleSubmit() {
      if (this.imageUploadLoading) {
        uni.showToast({
          title: '图片上传中，请稍候',
          icon: 'none'
        })
        return
      }
      if (!Array.isArray(this.formData.imageList)) {
        this.formData.imageList = this.normalizeImageListData(this.formData.imageList)
      }
      this.$refs.form.validate().then(async (valid) => {
        if (valid) {
          try {
            uni.showLoading({
              title: '保存中...'
            })

            if (this.formData.id) {
              await updateBizStoppageLog(this.formData)
              uni.showToast({
                title: '修改成功',
                icon: 'success'
              })
            } else {
              await addBizStoppageLog(this.formData)
              uni.showToast({
                title: '新增成功',
                icon: 'success'
              })
            }

            uni.hideLoading()

            // 延迟返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)

          } catch (error) {
            uni.hideLoading()
            console.error('提交失败:', error)
            uni.showToast({
              title: '提交失败',
              icon: 'none'
            })
          }
        }
      }).catch((errors) => {
        console.log('表单验证失败:', errors)
        uni.showToast({
          title: '请检查输入信息',
          icon: 'none'
        })
      })
    },

    async handleSelectImages() {
      if (!this.canAddMoreImages) {
        uni.showToast({
          title: '已达到上传上限',
          icon: 'none'
        })
        return
      }
      if (this.imageUploadLoading) {
        uni.showToast({
          title: '图片上传中，请稍候',
          icon: 'none'
        })
        return
      }
      const remaining = this.maxImageCount - this.uploadedImages.length
      try {
        const res = await this.chooseImages(remaining)
        const files = (res.tempFiles && res.tempFiles.length ? res.tempFiles : (res.tempFilePaths || []).map(path => ({ path })))
        await this.processSelectedImages(files)
      } catch (error) {
        if (error && error.errMsg && error.errMsg.includes('cancel')) {
          return
        }
        console.error('选择图片失败:', error)
        uni.showToast({
          title: '选择图片失败',
          icon: 'none'
        })
      }
    },

    chooseImages(count) {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count,
          sizeType: ['compressed', 'original'],
          sourceType: ['album', 'camera'],
          success: resolve,
          fail: reject
        })
      })
    },

    async processSelectedImages(files) {
      if (!files || !files.length) return
      this.imageUploadLoading = true
      let hasError = false
      for (const file of files) {
        const filePath = file.path || file.tempFilePath || file.url
        if (!filePath) continue
        try {
          await this.uploadSingleImage(filePath)
        } catch (error) {
          hasError = true
          console.error('图片上传失败:', error)
        }
      }
      this.imageUploadLoading = false
      if (hasError) {
        uni.showToast({
          title: '部分图片上传失败',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '图片上传成功',
          icon: 'success'
        })
      }
    },

    async uploadSingleImage(filePath) {
      const uploadRes = await uploadConstructionImage(filePath)
      const serverPath = uploadRes?.msg || uploadRes?.data?.url
      if (!serverPath) {
        throw new Error('未获取到图片路径')
      }
      const displayUrl = await this.transformToDisplayUrl(serverPath)
      const fileName = this.getFileNameFromPath(serverPath) || this.getFileNameFromPath(filePath)
      const imageItem = {
        url: displayUrl,
        originalPath: serverPath,
        fileName
      }
      this.uploadedImages.push(imageItem)
      if (!Array.isArray(this.formData.imageList)) {
        this.formData.imageList = []
      }
      this.formData.imageList.push(serverPath)
      return imageItem
    },

    removeUploadedImage(index) {
      const removed = this.uploadedImages.splice(index, 1)[0]
      if (removed?.originalPath && Array.isArray(this.formData.imageList)) {
        this.formData.imageList = this.formData.imageList.filter(item => item !== removed.originalPath)
      }
    },

    async previewUploadedImage(index) {
      if (!this.uploadedImages.length) return
      try {
        uni.showLoading({
          title: '加载中...'
        })
        const urls = await Promise.all(this.uploadedImages.map(async (item) => {
          const origin = item.originalPath || item.url
          return this.transformToDisplayUrl(origin)
        }))
        const current = urls[index] || urls[0]
        uni.previewImage({
          urls,
          current
        })
      } catch (error) {
        console.error('预览图片失败:', error)
        uni.showToast({
          title: '预览失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    removeOtherAttachment(index) {
      const removed = this.otherAttachments.splice(index, 1)[0]
      if (removed?.originalPath && Array.isArray(this.formData.imageList)) {
        this.formData.imageList = this.formData.imageList.filter(item => item !== removed.originalPath)
      }
    },

    async previewAttachmentFile(file) {
      if (!file?.originalPath) return
      try {
        uni.showLoading({
          title: '加载中...'
        })
        const url = await this.transformToDisplayUrl(file.originalPath)
        await this.openDocumentFromUrl(url, file.fileName)
      } catch (error) {
        console.error('预览附件失败:', error)
        uni.showToast({
          title: '预览失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    async openDocumentFromUrl(url, fileName) {
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url,
          success: (downloadRes) => {
            if (downloadRes.statusCode === 200) {
              uni.openDocument({
                filePath: downloadRes.tempFilePath,
                showMenu: true,
                fileType: this.getFileExtension(fileName),
                success: resolve,
                fail: reject
              })
            } else {
              reject(new Error('下载失败'))
            }
          },
          fail: reject
        })
      })
    },

    async transformToDisplayUrl(path) {
      if (!path) return ''
      try {
        const res = await fileLinkTransfer(path)
        if (res?.data?.url) {
          return res.data.url
        }
      } catch (error) {
        console.error('链接转换失败:', error)
      }
      return path
    },

    getFileNameFromPath(path) {
      if (!path) return ''
      const parts = path.split('/')
      return parts[parts.length - 1] || path
    },

    getFileExtension(fileName) {
      if (!fileName || fileName.indexOf('.') === -1) return ''
      return fileName.split('.').pop().toLowerCase()
    },

    isImageFile(fileName = '') {
      const ext = this.getFileExtension(fileName)
      const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
      return imageTypes.includes(ext)
    },

    normalizeImageListData(imageList) {
      if (!imageList) return []
      if (Array.isArray(imageList)) {
        return imageList.filter(item => !!item)
      }
      if (typeof imageList === 'string') {
        try {
          const parsed = JSON.parse(imageList)
          if (Array.isArray(parsed)) {
            return parsed.filter(item => !!item)
          }
        } catch (error) {
          return imageList.split(',').map(item => item.trim()).filter(item => !!item)
        }
      }
      return []
    },

    async syncAttachmentDisplay() {
      const list = this.normalizeImageListData(this.formData.imageList)
      this.formData.imageList = list
      if (!list.length) {
        this.uploadedImages = []
        this.otherAttachments = []
        return
      }
      const mapped = await Promise.all(list.map(async (originalPath) => {
        const fileName = this.getFileNameFromPath(originalPath)
        const displayUrl = await this.transformToDisplayUrl(originalPath)
        if (this.isImageFile(fileName)) {
          return {
            type: 'image',
            data: {
              originalPath,
              url: displayUrl,
              fileName
            }
          }
        }
        return {
          type: 'file',
          data: {
            originalPath,
            fileName,
            displayUrl
          }
        }
      }))
      this.uploadedImages = mapped.filter(item => item.type === 'image').map(item => item.data)
      this.otherAttachments = mapped.filter(item => item.type === 'file').map(item => item.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-stoppage-log-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-divider {
  margin: 30rpx 0 20rpx;
  padding: 20rpx 0;
  border-top: 2rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  margin-right: 40rpx;
  font-size: 28rpx;
  color: #333;
}

.radio-label text {
  margin-left: 10rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn.cancel {
  background: #f0f0f0;
  color: #666;
}

.action-btn.submit {
  background: #007AFF;
  color: #fff;
}

.action-btn:active {
  opacity: 0.8;
}

/* 缩小错误信息与控件的间距 */
.form-container :deep(.uni-forms-item__error) {
  padding-top: 2px !important;
}
</style>
<style lang="scss">
.form-container .uni-forms-item {
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
}

.form-container .uni-forms-item--border {
  padding: 4px 0 !important;
}

.form-container .uni-forms-item__error {
  padding-top: 2px !important;
}

:deep(.uni-forms-item__label) {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

:deep(.uni-easyinput__content) {
  border-radius: 12rpx;
  border: 1rpx solid #eee;
  background: #f9f9f9;
}

:deep(.uni-easyinput__content.is-focus) {
  border-color: #007AFF;
  background: #fff;
}

:deep(.uni-datetime-picker) {
  border-radius: 12rpx;
  border: 1rpx solid #eee;
  background: #f9f9f9;
}

:deep(.uni-datetime-picker.is-focus) {
  border-color: #007AFF;
  background: #fff;
}

/* 选择项目输入样式 */
.input-with-icon {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 20rpx;
}

.search-input {
  flex: 1;
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.search-input.inner {
  background: transparent;
  border: none;
  outline: none;
}

.search-input.placeholder {
  color: #999;
}

/* 项目选择弹窗样式 */
.project-picker {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 60vh;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.picker-content {
  max-height: 50vh;
  overflow-y: auto;
}

.project-list {
  padding: 0 30rpx 30rpx;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.project-item:last-child {
  border-bottom: none;
}

.project-item.selected {
  background-color: rgba(0, 122, 255, 0.05);
}

.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.image-upload-section {
  margin-top: 10rpx;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-card {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
  border: 2rpx dashed #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-card.image-add {
  flex-direction: column;
  color: #999;
}

.image-thumb {
  width: 100%;
  height: 100%;
}

.image-remove {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
  padding: 6rpx;
}

.add-text {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.upload-tip {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #999;
}

.other-attachment-list {
  margin-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.attachment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.attachment-row:last-child {
  border-bottom: none;
}

.attachment-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
}

.attachment-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-actions {
  display: flex;
  gap: 20rpx;
  font-size: 26rpx;
  color: #007AFF;
}

.attachment-action.remove {
  color: #FF3B30;
}
</style>

